<template>
    <div class="pdf-viewer-findbar" v-if="PDFViewer">
        <input type="text" v-model="query" @keyup.enter="find()">
        <span>{{ matchesCount.current }}/{{ matchesCount.total }}</span>
        <button :disabled="matchesCount.current <= 1" @click="prov()">上一个</button>
        <button :disabled="matchesCount.current >= matchesCount.total" @click="next()">下一个</button>
        <button :disabled="matchesCount.total <= 0" @click="point()">定位</button>
    </div>
    <div v-else>
        The PDFViewer is null!
    </div>
</template>
<script>
import { PDFFindController } from "pdfjs-dist/web/pdf_viewer";
export default {
    props: {
        PDFViewer: {
            type: Object
        },
        caseSensitive: Boolean,
        highlightAll: {
            type: Boolean,
            default: true
        },
        phraseSearch: {
            type: Boolean,
            default: true
        },
    },
    data(){
        return {
            matchesCount: { current: 0, total: 0 },
            query: ""
        }
    },
    mounted () {
        if(!this.PDFViewer) return
        this.$PDFFindController = new PDFFindController({
            pdfViewer: this.PDFViewer,
            eventBus: this.PDFViewer.eventBus,
            linkService: this.PDFViewer.linkService
        })
        if(this.$PDFFindController) this.initEvent(this.$PDFFindController._eventBus)
    },
    methods: {
        initEvent(eventBus){
            eventBus._on("updatefindmatchescount", ({ matchesCount })=>this.matchesCount=matchesCount)
            eventBus._on("updatefindcontrolstate", ({ state, previous, matchesCount, rawQuery })=>{
                this.matchesCount=matchesCount
            })
        },
        find(query=this.query){
            this.$PDFFindController.executeCommand('find', {
                caseSensitive: this.caseSensitive, 
                findPrevious: undefined,
                highlightAll: this.highlightAll, 
                phraseSearch: this.phraseSearch,
                query
            })
        },
        next(query=this.query){
            this.$PDFFindController.executeCommand('findagain', {
                caseSensitive: this.caseSensitive, 
                findPrevious: false,
                highlightAll: this.highlightAll, 
                phraseSearch: this.phraseSearch,
                query
            })
        },
        prov(query=this.query){
            this.$PDFFindController.executeCommand('findagain', {
                caseSensitive: this.caseSensitive, 
                findPrevious: true,
                highlightAll: this.highlightAll, 
                phraseSearch: this.phraseSearch,
                query
            })
        },
        async point(){
            const { pageIdx, matchIdx } = this.$PDFFindController.selected
            const pdfPageView = this.PDFViewer.getPageView(pageIdx)
            if(this.PDFViewer.currentPageNumber != pageIdx+1) this.PDFViewer.currentPageNumber = pageIdx+1
            setTimeout(() => {
                const { textDivs, matches } = pdfPageView.textLayer
                const element = textDivs[matches[matchIdx].begin.divIdx]
                this.$PDFFindController._updateMatch(false)
                this.$PDFFindController.scrollMatchIntoView({
                    element,
                    pageIdx,
                    matchIdx
                })
            }, 500);
        }
    },
    watch: {
        PDFViewer(val){
            this.$PDFFindController = new PDFFindController({
                pdfViewer: this.PDFViewer,
                eventBus: this.PDFViewer.eventBus,
                linkService: this.PDFViewer.linkService
            })
            val.findController = this.$PDFFindController
            if(this.$PDFFindController) this.initEvent(this.$PDFFindController._eventBus)
        },
        PDFFindController(val){
            this.initEvent(val._eventBus)
        }
    }
}
</script>